<template>
    <div class="main">
        <nav-bar :head="head"></nav-bar>
        <div class="login-main">
            <van-form @submit="onSubmit">
                <div class="main-input">
                    <van-field v-model="account" name="account" placeholder="账户名" :rules="[{ required: true,validator, message: '请填写账户名，8位字母数字组合' }]"/>
                    <van-field v-model="user_name" name="user_name" placeholder="昵称" :rules="[{ required: true, message: '请填写昵称' }]"/>
                    <van-field type="password" v-model="password" name="password" placeholder="密码" :rules="[{ required: true, message: '请输入密码' }]"/>
                    <van-field type="password" v-model="password_confirm" name="password_confirm" placeholder="确认密码" :rules="[{ required: true, validator:check_pass ,message: '两次密码输入不一致' }]"/>

                    <van-button color="#ff5c57" round native-type="submit">注册</van-button>
                    <p class="register">
                        已有账号？<b @click="login">直接登录</b>
                    </p>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import { Button } from 'vant';
    import { Form } from 'vant';
    import { Field } from 'vant';
    import { Toast } from 'vant';

    Vue.use(Toast);
    Vue.use(Field);
    Vue.use(Button);
    Vue.use(Form);
    export default {
        name: "login",
        data() {
            return {
                account: '',
                password: '',
                password_confirm: '',
                user_name: '',
                head: '登录'
            }
        },
        methods: {
            login: function() {
                this.$router.replace('/login')
            },
            onSubmit: function () {
                Toast.loading({
                    duration: 0, // 持续展示 toast
                    forbidClick: true,
                    message: '注册中',
                });
                var data = {
                    'account' : this.account,
                    'user_name' : this.user_name,
                    'password' : this.password
                };
                this.$api.login.Register(data).then(res => {
                    var response = res.data;
                    var this_ = this;
                    if (response.success){
                        Toast.clear();
                        Toast.success(response.msg);
                        setTimeout(function () {
                            this_.$router.replace('/login')
                        },1200)
                    }else{
                        Toast.fail(response.msg);
                    }
                })
            },
            validator(val) {
                return /^(?![0-9]+$)(?![a-z]+$)[0-9a-z]{8}$/.test(val);
            },
            check_pass(val){
                if (val !== this.password){
                    return false;
                }
                return true;
            }
        }
    }
</script>

<style scoped>
    .main{
        background-color: rgb(249,186,71);
        background-image: url("/images/background/login-bg.png");
        background-size: cover;
        height: 100vh;
    }
    .login-main{
        position: absolute;
        top: 40vh;
        width: 62vw;
        text-align: center;
        padding: 19vw;
        height:25vh;
    }
    .van-field{
        background: white;
        border: 2px solid;
        border-radius: 10px;
        margin-bottom: 1rem;
        text-align: center;
    }
    .van-cell{
        padding: 8px 12px !important;
    }
    .van-button--round{
        width: 100%;
    }
    .register{
        width: 100%;
        text-align: center;
        font-size: 12px;
        color: #5a5a5a;
    }
</style>
